Построение сеток в Bootstrap.
Сетка и классы
Построение сетки на боотстрап возможно в соответствии с макетом настроеным на колоночную верстку
Стандартно этот фреймворк настроен на 12 колоночную сетку с возможностью перенастройки на увеличение количества колонок, ширины контейнера и прочее
Фреймворк рассчитан на построение адаптивного дизайна с правилами CSS в виде медиа запросов позволяющих перестраивать блоки в потоке в зависимости от текущих разрешений экранов, имеет классы для возможности перемещения элементов внутри ряда и их центровки
Работа с фреймворком начинается с необходимых настроек на сайте http://getbootstrap.com/customize/, этот ресурс разработчика боотстрап позволяет подключить стили и настроить все необходимые элементы и блоки будущей страницы(формы, таблицы, кнопки, модальные окна и тд)
Завершающим этапом является скачивание готового файла-библиотеки и подключение его к странице HTML.
Классы Bootstrap для построения сеток
| Bootstrap | Назначение | |
|---|---|---|
| .container | Помещаю ряды и колонки страницы в контейнер (блок с классом.container). Ширина этого блока имеет на различных контрольных точках (благодоря наличию медиа запросов) разную ширину для соответствия с системой разметки макета.Также в этом классе по умолчанию имеется padding-и. | |
| .container-fluid | Если есть необходимость и макет расчитан на переменную ширину контента, применяю класс который использует 100% ширины окна браузера. Класс .container-fluid устанавливает значение свойства margin, равное auto от левого и правого края контейнера до границ элемента body (т.е margin-left: auto и margin-right: auto). Этим он выравнивает элемент (.container-fluid) по горизонтали. Класс .container-fluid задает отступы с помощью свойства CSS padding от левого и право края элемента до его содержимого на 15px (т.е. padding-left: 15px, padding-right: 15px). | |
| .row | Класс является обязательным при построении сетки на этом фреймворке, так как колонки col- имеют паддинги внешние паддинги данный класс компенсирует отрицательным маржином(слева и справа), с этого класса начинается построение сетки(ряда) | |
| .col-xs-# | класс для колонки в ряду подключается на разрешении экрана менее 768px | |
| .col-sm-# | класс для колонки в ряду подключается на разрешении экрана от 768px до 992px | |
| .col-md-# | класс для колонки в ряду подключается на разрешении экрана от 992px до 1200px | |
| .col-lg-# | класс для колонки в ряду подключается на разрешении экрана от 1200px | |
| .col-xs-offset-# | добавляет дополнительный margin_left менее 768px | Эти классы используют когда количество колонок в ряду по макету менее 12 |
| .col-sm-offset-# | добавляет дополнительный margin_left на разрешении экрана от 768px до 992px | |
| .col-md-offset-# | добавляет дополнительный margin_left на разрешении экрана от 992px до 1200px | |
| .col-lg-offset-# | добавляет дополнительный margin_left на разрешении экрана от 1200px |
Наглядный пример сетки
Класс .clearfix
Класс .clearfix использую если блоки в ряду имеют различную высоту и нужно отменить обтекание свойственное "флоченым" элементам, класс создаёт некую "планку" в потоке и не даёт всем элементам под ней обтекать верхний блок
Адаптивные таблицы
Таблицы, используемые для отображения данных, также адаптивны в Bootstrap. Для использования стилей таблиц Bootstrap мы используем класс .table, которому соответствует следующий CSS-код:
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
Применяя ширину в 100%, Bootstrap обеспечивает заполнение таблицами всей ширины родительского элемента. Но есть одна проблема. Таблицы с несколькими столбцами сжимаются на небольших устройствах, и могут не читаться.
Чтобы исправить это, Bootstrap содержит другой класс table-responsive
Вот его CSS-код:
.table-responsive {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
Эти стили преобразуют столбцы таблицы в горизонтально прокручиваемые на небольших устройствах.
Адаптивные изображения
Большие изображения могут стать проблемой для небольших устройств. Bootstrap использует класс .img, что сделать любое изображение адаптивным:
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
Комбинация объявлений max-width: 100% и height: auto
обеспечивает то, что изображения пропорционально уменьшаются на небольших устройствах, оставаясь в рамках ограничений родительского элемента на больших устройствах.